<template>
	<view class="editUserInfo">
		<button open-type="chooseAvatar" plain class="avatar" @chooseavatar="getAvatar">
			<image class="pic active" :src="avatarUrl" mode="aspectFill"></image>
		</button>
		<view class="tips">点击修改头像</view>
		<view class="item">
			<view class="label">姓名</view>
			<view class="cont">
				<colorInput type="nickname" placeholder="请输入姓名" v-model="form.nickname"></colorInput>
			</view>
		</view>
		
		<u-button @click="submit" :custom-style="{margin: '60rpx 0',backgroundColor:'#006767',color:'#fff',borderRadius: '12rpx',height: '74rpx',fontSize:'32rpx'}">
			提交
		</u-button>
		<safeBottom></safeBottom>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import config from '@/utils/config.js'
	export default {
		data() {
			return {
				form:{
					head:'',
					nickname: ''
				},
				avatarUrl: ''
			};
		},
		onLoad() {
			this.setInit()
		},
		methods: {
			setInit() {
				const userInfo = this.$pinia.state.value.userinfo.userinfo;
				this.avatarUrl = userInfo.head
				this.form = {
					...userInfo,
					head: ''
				}
			},
			submit() {
				if(!this.form.nickname) {
					uni.showToast({
						title: '请录入昵称',
						icon: 'none'
					})
					return;
				}
				request({
					url:'api/personal/userMsgEdit',
					method:'post',
					needLogin: true,
					data: this.form
				}).then(res => {
					uni.showToast({
						title: '修改成功！'
					})
					getApp().getUserinfo()
					uni.navigateBack()
				})
			},
			getQiNiuOption() {
				return request({
					url:'api/common/qiNiuToken',
					needLogin: true,
				})
			},
			getAvatar(e) {
				console.log(e,'eee')
				const avatarUrl = e.detail.avatarUrl;
				this.getQiNiuOption().then(({token,domain}) => {
					uni.uploadFile({
						filePath: avatarUrl,
						url: config.qiNiuUploadUrl,
						name: 'file',
						formData: {
							token
						},
						success: res => {
							const data = JSON.parse(res.data)
							this.avatarUrl = domain + data.key
							this.form.head = data.key
						},
						fail:err => {
							console.log(err,'err')
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.editUserInfo {
	padding: 30rpx;
	.avatar {
		$s: 140rpx;
		width: $s;
		height: $s;
		padding: 0;
		border: 0;
		.pic {
			width: 100%;
			height: 100%;
			display: block;
			box-sizing: border-box;
			&.active {
				border: 2rpx solid #f5f5f5;
				border-radius: 50%;
			}
		}
	}
	.tips {
		font-size: 32rpx;
		color: #999999;
		text-align: center;
		margin-top: 20rpx;
	}
	.item {
		margin-bottom: 24rpx;
		margin-top: 50rpx;
		.label {
			font-size: 28rpx;
			color: #000;
			margin-bottom: 12rpx;
		}
	}
}
</style>
